<template>
    <div>
        <el-form :model="propJson" label-width="auto" style="width: 100%">
            <el-form-item label="查询字段">
                <el-select v-model="propJson.tableSelectField" placeholder="表单字段名称" style="width: 100%" multiple>
                    <el-option
                        v-for="info in propJson.tableFieldList" :label="info.variableLabel" :value="info.variableField"> {{info.variableLabel}} </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="复选框关联对象名称">
                <el-select v-model="propJson.selectVarParamName" placeholder="变量名称" style="width: 100%">
                    <el-option v-for="info in commonParam" :label="info.variableName" :value="info.variableName" />
                </el-select>
            </el-form-item>

            <el-form-item label="表格内容">
                <el-radio-group v-model="propJson.tableDataType">
                    <el-radio label="custom">自定义</el-radio>
                    <el-radio label="variable">关联变量</el-radio>
                    <el-radio label="api">服务调用</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="自定义内容" v-if="propJson.tableDataType === 'custom'">
                <el-input v-model="propJson.tableDataCustomInfo" style="width: 100%" placeholder="自定义内容">
                    <template #prepend>
                        <el-select v-model="propJson.tableDataCustomType" placeholder="Select" style="width: 115px">
                            <el-option label="数组" value="Array" />
                        </el-select>
                    </template>
                </el-input>
            </el-form-item>

            <el-form-item label="关联参数" v-if="propJson.tableDataType === 'variable'">
                <el-select v-model="propJson.tableDataVariableParam" placeholder="变量名称" style="width: 100%">
                    <el-option v-for="info in commonParam" :label="info.variableName" :value="info.variableName" />
                </el-select>
            </el-form-item>

            <el-form-item label="调用方式" v-if="propJson.tableDataType === 'api'">
                <!-- MSSA Microsoft Service Share Api -->
                <!-- MSOA Microsoft Service Owned Api -->
                <!-- RTSA RestTemplate Service Share Api -->
                <el-radio-group v-model="propJson.apiType">
                    <el-radio label="MSSA">微服务共享API</el-radio>
                    <el-radio label="MSOA">微服务自有API</el-radio>
                    <el-radio label="RTSA">通用透传API</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="服务地址" v-if="propJson.tableDataType === 'api'">
                <el-input v-model="propJson.apiPath" style="width: 100%" placeholder="文本内容" />
            </el-form-item>

            <el-form-item label="请求方式" v-if="propJson.tableDataType === 'api'">
                <el-radio-group v-model="propJson.apiMethod">
                    <el-radio label="GET">GET请求</el-radio>
                    <el-radio label="POST">POST请求</el-radio>
                </el-radio-group>
            </el-form-item>

            <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;" v-if="propJson.tableDataType === 'api'">
                <el-button type="primary" class="addCollapse" size="small" @click="addRequestVariable()">添加请求入参</el-button>
            </div>

            <el-form :model="propJson" label-width="auto" style="width: 100%" v-if="propJson.tableDataType === 'api'">
                <el-collapse>
                    <el-collapse-item :name="index" v-for="(item, index) in propJson.queryListRequestList">
                        <template #title>
                            <div class="collapseTitle">
                                <span>参数 {{(index + 1)}}</span>
                                <el-button type="danger" plain size="small" style="margin-left: 20px" @click.stop="deleteRequestVariable(index)">删除</el-button>
                            </div>
                        </template>
                        <el-form-item label="参数类型">
                            <el-radio-group v-model="item.type">
                                <el-radio label="custom">自定义</el-radio>
                                <el-radio label="variable">关联变量</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="参数名称">
                            <el-input v-model="item.variableName" style="width: 100%"/>
                        </el-form-item>
                        <el-form-item label="参数值" v-if="item.type === 'custom'">
                            <el-input v-model="item.variableValue" style="width: 100%">
                                <template #prepend>
                                    <el-select v-model="item.variableType" placeholder="Select" style="width: 115px">
                                        <el-option label="字符串" value="String" />
                                        <el-option label="数组" value="Array" />
                                        <el-option label="对象" value="Object" />
                                    </el-select>
                                </template>
                            </el-input>
                        </el-form-item>

                        <el-form-item label="变量名称" v-if="item.type === 'variable'">
                            <el-select v-model="item.variableParamName" placeholder="变量名称" style="width: 100%">
                                <el-option v-for="info in commonParam" :label="info.variableName" :value="info.variableName" />
                            </el-select>
                        </el-form-item>
                    </el-collapse-item>
                </el-collapse>
            </el-form>

            <el-form-item label="返回值JSONPath" v-if="propJson.tableDataType === 'api'">
                <el-input v-model="propJson.responseJsonPath" style="width: 100%" placeholder="返回值JSONPath" />
            </el-form-item>

            <span>已选择数据获取：</span> <br /><br />

            <el-form-item label="已选择数据返回内容">
                <el-radio-group v-model="propJson.selectedDataType">
                    <el-radio label="custom">自定义</el-radio>
                    <el-radio label="variable">关联变量</el-radio>
                    <el-radio label="api">服务调用</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="自定义内容" v-if="propJson.selectedDataType === 'custom'">
                <el-input v-model="propJson.selectedDataCustomInfo" style="width: 100%" placeholder="自定义内容">
                    <template #prepend>
                        <el-select v-model="propJson.selectedDataCustomType" placeholder="Select" style="width: 115px">
                            <el-option label="数组" value="Array" />
                        </el-select>
                    </template>
                </el-input>
            </el-form-item>

            <el-form-item label="关联参数" v-if="propJson.selectedDataType === 'variable'">
                <el-select v-model="propJson.selectedDataVariableParam" placeholder="变量名称" style="width: 100%">
                    <el-option v-for="info in commonParam" :label="info.variableName" :value="info.variableName" />
                </el-select>
            </el-form-item>

            <el-form-item label="调用方式" v-if="propJson.selectedDataType === 'api'">
                <!-- MSSA Microsoft Service Share Api -->
                <!-- MSOA Microsoft Service Owned Api -->
                <!-- RTSA RestTemplate Service Share Api -->
                <el-radio-group v-model="propJson.selectedApiType">
                    <el-radio label="MSSA">微服务共享API</el-radio>
                    <el-radio label="MSOA">微服务自有API</el-radio>
                    <el-radio label="RTSA">通用透传API</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="服务地址" v-if="propJson.selectedDataType === 'api'">
                <el-input v-model="propJson.selectedApiPath" style="width: 100%" placeholder="文本内容" />
            </el-form-item>

            <el-form-item label="请求方式" v-if="propJson.selectedDataType === 'api'">
                <el-radio-group v-model="propJson.selectedApiMethod">
                    <el-radio label="GET">GET请求</el-radio>
                    <el-radio label="POST">POST请求</el-radio>
                </el-radio-group>
            </el-form-item>

            <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;" v-if="propJson.selectedDataType === 'api'">
                <el-button type="primary" class="addCollapse" size="small" @click="addSelectedRequestVariable()">添加请求入参</el-button>
            </div>

            <el-form :model="propJson" label-width="auto" style="width: 100%" v-if="propJson.selectedDataType === 'api'">
                <el-collapse>
                    <el-collapse-item :name="index" v-for="(item, index) in propJson.selectedListRequestList">
                        <template #title>
                            <div class="collapseTitle">
                                <span>参数 {{(index + 1)}}</span>
                                <el-button type="danger" plain size="small" style="margin-left: 20px" @click.stop="deleteSelectedRequestVariable(index)">删除</el-button>
                            </div>
                        </template>
                        <el-form-item label="参数类型">
                            <el-radio-group v-model="item.type">
                                <el-radio label="custom">自定义</el-radio>
                                <el-radio label="variable">关联变量</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="参数名称">
                            <el-input v-model="item.variableName" style="width: 100%"/>
                        </el-form-item>
                        <el-form-item label="参数值" v-if="item.type === 'custom'">
                            <el-input v-model="item.variableValue" style="width: 100%">
                                <template #prepend>
                                    <el-select v-model="item.variableType" placeholder="Select" style="width: 115px">
                                        <el-option label="字符串" value="String" />
                                        <el-option label="数组" value="Array" />
                                        <el-option label="对象" value="Object" />
                                    </el-select>
                                </template>
                            </el-input>
                        </el-form-item>

                        <el-form-item label="变量名称" v-if="item.type === 'variable'">
                            <el-select v-model="item.variableParamName" placeholder="变量名称" style="width: 100%">
                                <el-option v-for="info in commonParam" :label="info.variableName" :value="info.variableName" />
                            </el-select>
                        </el-form-item>
                    </el-collapse-item>
                </el-collapse>
            </el-form>

            <el-form-item label="返回值JSONPath" v-if="propJson.selectedDataType === 'api'">
                <el-input v-model="propJson.selectedResponseJsonPath" style="width: 100%" placeholder="返回值JSONPath" />
            </el-form-item>

            <el-form-item label="表格字段与返回字段映射">
                <el-input v-model="propJson.selectedMatchField" style="width: 100%" placeholder="表格字段与返回字段映射" />
            </el-form-item>

            <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;">
                <el-button type="primary" class="addCollapse" size="small" @click="addColVariable()">添加表格列字段</el-button>
            </div>

            <el-form :model="propJson" label-width="auto" style="width: 100%">
                <el-collapse>
                    <el-collapse-item :name="index" v-for="(item, index) in propJson.tableFieldList">
                        <template #title>
                            <div class="collapseTitle">
                                <span>字段 {{(index + 1)}}</span>
                                <el-button type="danger" plain size="small" style="margin-left: 20px" @click.stop="deleteColVariable(index)">删除</el-button>
                            </div>
                        </template>
                        <el-form-item label="字段名称">
                            <el-input v-model="item.variableLabel" style="width: 100%" placeholder="字段名称"/>
                        </el-form-item>

                        <el-form-item label="字段名称 - 英文">
                            <el-input v-model="item.variableLabelEN" style="width: 100%" placeholder="字段名称"/>
                        </el-form-item>
                        <el-form-item label="字段展示内容">
                            <el-radio-group v-model="item.showType">
                                <el-radio label="variable">绑定属性字段</el-radio>
                                <el-radio label="custom">自定义内容</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="字段绑定的对象属性" v-if="item.showType === 'variable'">
                            <el-input v-model="item.variableField" style="width: 100%" placeholder="字段绑定的对象属性"/>
                        </el-form-item>
                        <el-form-item label="自定义HTML" v-if="item.showType === 'custom'">
                            <el-input v-model="item.slotHtmlContent" style="width: 100%" placeholder="操作自定义内容" type="textarea"/>
                        </el-form-item>
                        <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;" v-if="item.showType === 'custom'">
                            <span style="font-size: 12px">自定义操作添加完后需要点击注入</span>
                        </div>
                        <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;" v-if="item.showType === 'custom'">
                            <el-button type="primary" class="addCollapse" size="small" @click="addTableFieldCustom(item)">注入</el-button>
                        </div>
                        <el-form-item label="字段对齐方式">
                            <el-radio-group v-model="item.isAlignCenter">
                                <el-radio label="left">左侧</el-radio>
                                <el-radio label="center">居中</el-radio>
                                <el-radio label="right">右侧</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-collapse-item>
                </el-collapse>
            </el-form>


            <span>提交行为</span>

            <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;">
                <el-button type="primary" class="addCollapse" size="small" @click="addSubmitAction()">添加表单提交行为</el-button>
            </div>

            <el-form :model="propJson" label-width="auto" style="width: 100%">
                <el-collapse>
                    <el-collapse-item :name="index" v-for="(item, index) in propJson.submitActionList" style="border: 1px solid #b1b3b8">
                        <template #title>
                            <div class="collapseTitle">
                                <span>行为 {{(index + 1)}}</span>
                                <el-button type="danger" plain size="small" style="margin-left: 20px" @click.stop="deleteSubmitAction(index)">删除</el-button>
                            </div>
                        </template>
                        <el-form-item label="参数类型">
                            <el-radio-group v-model="item.type">
                                <el-radio label="variable">关联变量</el-radio>
                                <el-radio label="api">服务调用</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="变量名称" v-if="item.type === 'variable'">
                            <el-select v-model="item.variableParamName" placeholder="变量名称" style="width: 100%">
                                <el-option v-for="info in commonParam" :label="info.variableName" :value="info.variableName" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="参数值"  v-if="item.type === 'variable'">
                            <el-input v-model="item.variableValue" style="width: 100%"/>
                        </el-form-item>


                        <el-form-item label="调用方式" v-if="item.type === 'api'">
                            <!-- MSSA Microsoft Service Share Api -->
                            <!-- MSOA Microsoft Service Owned Api -->
                            <!-- RTSA RestTemplate Service Share Api -->
                            <el-radio-group v-model="item.apiType">
                                <el-radio label="MSSA">微服务共享API</el-radio>
                                <el-radio label="MSOA">微服务自有API</el-radio>
                                <el-radio label="RTSA">通用透传API</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="服务地址" v-if="item.type === 'api'">
                            <el-input v-model="item.apiPath" style="width: 100%" placeholder="文本内容" />
                        </el-form-item>

                        <el-form-item label="请求方式" v-if="item.type === 'api'">
                            <el-radio-group v-model="item.apiMethod">
                                <el-radio label="GET">GET请求</el-radio>
                                <el-radio label="POST">POST请求</el-radio>
                            </el-radio-group>
                        </el-form-item>

                        <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;" v-if="item.type === 'api'">
                            <el-button type="primary" class="addCollapse" size="small" @click="addSubmitRequestVariable(item)">添加请求入参</el-button>
                        </div>

                        <el-form :model="propJson" label-width="auto" style="width: 100%" v-if="item.type === 'api'">
                            <el-collapse>
                                <el-collapse-item :name="paramIndex" v-for="(paramItem, paramIndex) in item.apiParamList">
                                    <template #title>
                                        <div class="collapseTitle">
                                            <span>参数 {{(paramIndex + 1)}}</span>
                                            <el-button type="danger" plain size="small" style="margin-left: 20px" @click.stop="deleteSubmitRequestVariable(item, paramIndex)">删除</el-button>
                                        </div>
                                    </template>
                                    <el-form-item label="参数类型">
                                        <el-radio-group v-model="paramItem.type">
                                            <el-radio label="custom">自定义</el-radio>
                                            <el-radio label="variable">关联变量</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item label="参数名称">
                                        <el-input v-model="paramItem.variableName" style="width: 100%"/>
                                    </el-form-item>
                                    <el-form-item label="参数值" v-if="paramItem.type === 'custom'">
                                        <el-input v-model="paramItem.variableValue" style="width: 100%">
                                            <template #prepend>
                                                <el-select v-model="paramItem.variableType" placeholder="Select" style="width: 115px">
                                                    <el-option label="字符串" value="String" />
                                                    <el-option label="数组" value="Array" />
                                                    <el-option label="对象" value="Object" />
                                                </el-select>
                                            </template>
                                        </el-input>
                                    </el-form-item>

                                    <el-form-item label="变量名称" v-if="paramItem.type === 'variable'">
                                        <el-select v-model="paramItem.variableParamName" placeholder="变量名称" style="width: 100%">
                                            <el-option v-for="info in commonParam" :label="info.variableName" :value="info.variableName" />
                                        </el-select>
                                    </el-form-item>
                                </el-collapse-item>
                            </el-collapse>
                        </el-form>

                        <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;" v-if="item.type === 'api'">
                            <el-button type="primary" class="addCollapse" size="small" @click="addSubmitResponseVariable(item)">添加响应出参映射</el-button>
                        </div>

                        <el-form :model="propJson" label-width="auto" style="width: 100%" v-if="item.type === 'api'">
                            <el-collapse>
                                <el-collapse-item :name="paramIndex" v-for="(paramItem, paramIndex) in item.apiResponseList">
                                    <template #title>
                                        <div class="collapseTitle">
                                            <span>参数 {{(paramIndex + 1)}}</span>
                                            <el-button type="danger" plain size="small" style="margin-left: 20px" @click.stop="deleteSubmitResponseVariable(item, paramIndex)">删除</el-button>
                                        </div>
                                    </template>
                                    <el-form-item label="参数名称">
                                        <el-select v-model="paramItem.variableName" placeholder="参数名称" style="width: 100%">
                                            <el-option v-for="info in commonParam" :label="info.variableName" :value="info.variableName" />
                                        </el-select>
                                    </el-form-item>

                                    <el-form-item label="参数值">
                                        <el-input v-model="paramItem.variableValue" style="width: 100%" placeholder="参数值jsonPath"/>
                                    </el-form-item>
                                </el-collapse-item>
                            </el-collapse>
                        </el-form>
                    </el-collapse-item>
                </el-collapse>
            </el-form>
        </el-form>
    </div>
</template>

<script>
export default {
    name: "TableSelectionSearchDrawer",
    props: ['commonParam'],
    computed: {
        propJson() {
            return this.$store.state.lowCodeDrawerJsonInfo;
        }
    },
    methods: {
        addRequestVariable() {
            if (!this.propJson.queryListRequestList) {
                this.propJson.queryListRequestList = []
            }
            let variableInfo = {variableName: "", variableValue: "", variableType: "String", type: "custom", variableParamName: ""}
            this.propJson.queryListRequestList.push(variableInfo)
        },
        deleteRequestVariable() {
            // 删除数组中的数据
            this.propJson.queryListRequestList.splice(index, 1);
        },
        addColVariable() {
            let variableInfo = {variableLabel: "", variableLabelEN: "",  variableField: "", isAlignCenter: "left", slotHtmlContent: "", showType: "variable"}
            this.propJson.tableFieldList.push(variableInfo)
        },
        deleteColVariable(index) {
            // 删除数组中的数据
            this.propJson.tableFieldList.splice(index, 1);
        },
        addSelectedRequestVariable() {
            if (!this.propJson.selectedListRequestList) {
                this.propJson.selectedListRequestList = []
            }
            let variableInfo = {variableName: "", variableValue: "", variableType: "String", type: "custom", variableParamName: ""}
            this.propJson.selectedListRequestList.push(variableInfo)
        },
        deleteSelectedRequestVariable(index) {
            // 删除数组中的数据
            this.propJson.selectedListRequestList.splice(index, 1);
        },
        addSubmitAction() {
            if (!this.propJson.submitActionList) {
                this.propJson.submitActionList = []
            }
            let variableInfo = {variableName: "", variableValue: "", type: "variable", variableType: "String", variableParamName: "", apiMethod: "GET", apiType: "MSOA", apiPath: ""}
            this.propJson.submitActionList.push(variableInfo)
        },
        deleteSubmitAction(index) {
            // 删除数组中的数据
            this.propJson.submitActionList.splice(index, 1);
        },
        addSubmitRequestVariable(item) {
            if (!item.apiParamList) {
                item.apiParamList = []
            }
            let variableInfo = {variableName: "", variableValue: "", type: "custom", variableType: "String", variableParamName: ""}
            item.apiParamList.push(variableInfo)
        },
        deleteSubmitRequestVariable(item, paramIndex) {
            // 删除数组中的数据
            item.apiParamList.splice(paramIndex, 1);
        },
        addSubmitResponseVariable(item) {
            if (!item.apiResponseList) {
                item.apiResponseList = []
            }
            let variableInfo = {variableName: "", variableValue: ""}
            item.apiResponseList.push(variableInfo)
        },
        deleteSubmitResponseVariable(item, paramIndex) {
            // 删除数组中的数据
            item.apiResponseList.splice(paramIndex, 1);
        }
    }
}
</script>

<style scoped lang="less">

</style>